﻿@using AiXiu.Model
@model List<TBVideos>
@{
    ViewBag.Title = "Index";
}


<style>
    .videos {
        width: 100%;
    }

        .videos .item {
            width: 49%;
            margin-left: 0.5%;
            margin-right: 0.5%;
            float: left;
            padding-bottom: 1.6em;
        }

        .videos img {
            width: 100%;
            height: auto;
        }
</style>
<div class="page" data-page="videos">
    <div class="page-content">
        <div class="block block-strong margin-top-none">
            <div class="videos">
                @foreach (var item in Model)
                {
                    string avatar = item.TBUsers.Avatar ?? "/imgs/avatar.jpg";
                    <div class="item">
                        <a class="link cover external" href="@Url.Action("Play","Video")?videoId=@item.VideoId">
                            <img src="/imgs/rectangle.jpg" data-src="@item.CoverURL" class="lazy" />
                        </a>
                        <div class="chip">
                            <div class="chip-media">
                                <img src="@avatar" />
                            </div>
                            <div class="chip-label">@item.TBUsers.NickName</div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<div class="toolbar tabbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
        <a href="@Url.Action("Index","Home")" class="tab-link external tab-link-active">
            <i class="icon f7-icons size-29">videocam</i>
            <span class="tabbar-label">视频</span>
        </a>
        <a href="@Url.Action("Index","Friends")" class="tab-link external">
            <i class="icon f7-icons size-22">bubble_left_bubble_right</i>
            <span class="tabbar-label">聊天</span>
        </a>
        <a href="@Url.Action("Index","Personal")" class="tab-link external">
            <i class="icon f7-icons size-25">person</i>
            <span class="tabbar-label">我的</span>
        </a>
    </div>
</div>
@section footScript{
    <script src="~/lib/masonry-layout/dist/masonry.pkgd.min.js"></script>
    <script>
        // 图片懒加载
        app.on('lazyLoaded', function () {
            // 图片流布局
            new Masonry('.videos', {
                itemSelector: '.item',
                columnWidth: '.item',
                percentPosition: true
            })
        })
    </script>
}